<template>
  <div id="main">
    <div id="big_tit">
      <img src="./modules/images/big-title.png" alt="" />
    </div>
    <div id="mapDiv"></div>
    <div id="refresh">
      <span class="time" id="timeYear">2022</span>年 <span class="time" id="timeMonth">5</span>月
      <span class="time" id="timeDay">6</span>日 星期<span id="timeWeekday">二</span>
    </div>
    <!--设备总览 -->
    <div id="sbzl">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>设备总览</span>
      </div>
      <div class="item zm">
        <div class="box">
          <div class="left">
            <img src="./modules/images/icons/1-1.png" alt="" />
          </div>
          <div class="right">
            <div class="numb" id="sbzl-zm">1</div>
            <div style="font-size: 14px; color: #d4fcfc">照明</div>
          </div>
        </div>
      </div>
      <div class="item jk">
        <!-- <div class="numb" id="sbzl-jk">0</div>
              <div class="title">监控</div> -->
        <div class="box">
          <div class="left">
            <img src="./modules/images/icons/1-2.png" alt="" />
          </div>
          <div class="right">
            <div class="numb" id="sbzl-jk">1</div>
            <div style="font-size: 14px; color: #d4fcfc">监控</div>
          </div>
        </div>
      </div>
      <div class="item cdz">
        <!-- <div class="numb" id="sbzl-cdz">0</div>
              <div class="title">充电桩</div> -->
        <div class="box">
          <div class="left">
            <img src="./modules/images/icons/1-3.png" alt="" />
          </div>
          <div class="right">
            <div class="numb" id="sbzl-cdz">1</div>
            <div style="font-size: 14px; color: #d4fcfc">充电桩</div>
          </div>
        </div>
      </div>
      <div style="margin-top: 31px">
        <div class="item wifi">
          <!-- <div class="numb" id="sbzl-wifi">0</div>
                  <div class="title">wifi-AP</div> -->
          <div class="box">
            <div class="left">
              <img src="./modules/images/icons/1-4.png" alt="" />
            </div>
            <div class="right">
              <div class="numb" id="sbzl-wifi">1</div>
              <div style="font-size: 14px; color: #d4fcfc">wifi-AP</div>
            </div>
          </div>
        </div>
        <div class="item xxp">
          <!-- <div class="numb" id="sbzl-xxpm">0</div>
                  <div class="title">信息屏幕</div> -->
          <div class="box">
            <div class="left">
              <img src="./modules/images/icons/1-5.png" alt="" />
            </div>
            <div class="right">
              <div class="numb" id="sbzl-xxpm">1</div>
              <div style="font-size: 14px; color: #d4fcfc">信息屏幕</div>
            </div>
          </div>
        </div>
        <div class="item yjjg">
          <!-- <div class="numb" id="sbzl-yjjg">0</div>
                  <div class="title">一键告警</div> -->
          <div class="box">
            <div class="left">
              <img src="./modules/images/icons/1-6.png" alt="" />
            </div>
            <div class="right">
              <div class="numb" id="sbzl-yjjg">1</div>
              <div style="font-size: 14px; color: #d4fcfc">一键告警</div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 18px">
        <div class="item gb">
          <!-- <div class="numb" id="sbzl-gb">0</div>
                  <div class="title">广播</div> -->
          <div class="box">
            <div class="left">
              <img src="./modules/images/icons/1-7.png" alt="" />
            </div>
            <div class="right">
              <div class="numb" id="sbzl-gb">1</div>
              <div style="font-size: 14px; color: #d4fcfc">广播</div>
            </div>
          </div>
        </div>
        <div class="item cgq">
          <!-- <div class="numb" id="sbzl-cgq">0</div>
                  <div class="title">传感器</div> -->
          <div class="box">
            <div class="left">
              <img src="./modules/images/icons/1-8.png" alt="" />
            </div>
            <div class="right">
              <div class="numb" id="sbzl-cgq">1</div>
              <div style="font-size: 14px; color: #d4fcfc">传感器</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 智慧照明 -->
    <div id="zhzm">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>智慧照明</span>
      </div>
      <div id="y_gauge1"></div>
      <div id="y_gauge2"></div>
      <div id="y_gauge3"></div>
      <div class="progress">
        <div class="item">
          <div class="circle"></div>
          <div class="count">1</div>
          <div class="name">总安装</div>
        </div>
        <div class="item2">
          <div class="circle"></div>
          <div class="count">1</div>
          <div class="name">在线</div>
        </div>
        <div class="item3">
          <div class="circle"></div>
          <div class="count">1</div>
          <div class="name">亮灯</div>
        </div>
        <div class="item4" style="left: ">
          <div class="circle active"></div>
          <div class="count activeNum">0</div>
          <div class="name">故障</div>
        </div>
      </div>
    </div>
    <!-- 智慧充电 -->
    <!-- <div id="zhcd">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>智慧充电</span>
      </div>
      <div>
        <div id="cd_num"></div>
        <span class="tit">累计充电量</span>
      </div>
      <div>
        <div id="cd_money"></div>
        <span class="tit2">累计金额</span>
      </div>
    </div> -->
    <!-- 公共wifi -->
    <div id="ggwf">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>公共wifi</span>
      </div>
      <div id="ggwfChart" style="width: 100%; height: 300px; margin-top: 15px"></div>
    </div>
    <!-- 环境气象 -->
    <div id="hjqx">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>环境气象</span>
      </div>
      <div
        style="
          height: 130px;
          width: 420px;
          margin: 50px 0 0 10px;
          padding: 20px 0 0 10px;
          display: flex;
          align-items: center;
        "
      >
        <div style="display: inline-block; font-size: 52px; color: #fff">{{ temperature }}℃</div>
        <div style="display: inline-block; width: 140px; font-size: 30px; color: #fff; margin-left: 25px">
          {{ city }}<br />{{ weather }}
        </div>
        <div style="display: inline-block; margin-left: 25px"><img id="weatherImg" :src="weatherIcon" alt="" /></div>
        <!-- src="./modules/images/weather/weather_img01.png" alt=""></div> -->
      </div>
    </div>
    <!-- 智能监控 -->
    <div id="znjk">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>智能监控</span>
      </div>
      <div style="height: 160px; width: 420px; margin: 60px 0 0 16px">
        <div style="width: 295px; height: 160px; float: left">
          <!-- <div style="width: 219px;height: 122px;"> -->
          <img src="./modules/images/jiankong.png" alt="" style="width: 100%" />
          <!-- </div> -->
        </div>
        <div style="width: 125px; height: 160px; float: right; text-align: center">
          <div style="height: 50%; line-height: 79px; font-size: 18px; color: #fff; border: 1px solid #144675">
            人流量：<span style="color: #04bbef">415</span>
          </div>
          <div
            style="
              height: 50%;
              line-height: 79px;
              font-size: 18px;
              color: #fff;
              border: 1px solid #144675;
              border-top: none;
            "
          >
            车流量：<span style="color: #04bbef">36</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 信息 -->
    <!-- <div id="xx">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>信息</span>
  		</div>
  		<div style="width: 412px;height: 190px;margin: 50px auto 0; ">
  			<img src="./modules/images/xinxi.png" alt="" style="width: 100%;">
  		</div>
      </div> -->
    <!--报警与广播 -->
    <div id="bjygb">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>告警信息</span>
      </div>
      <!-- <div>
        <p>
          暂无告警信息
        </p>
      </div> -->
      <div>
        <!-- <img src="./modules/images/laba.png" alt="" style="width: 30px" /> -->
        <!-- <div id="J-scroll" class="notice">
          <ul class="marquee_list"></ul>
        </div> -->
      </div>
      <div style="margin: 0 20px; background: #051958; margin-top: 4px; display: block">
        <p class="p1" style="margin-top: 40px;background:transparent">暂无告警信息</p>
        <!-- <table class="table_2" width="100%" cellpadding="6" cellspacing="0">
          <tr class="row1">
            <td>数据0</td>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row1">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
        </table> -->
      </div>
    </div>
    <!-- 综合告警 -->
    <!-- <div id="zhgj">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>综合告警</span>
      </div>
      <div style="margin: 55px 50px; border: 1px solid #069; background: #071753">
        <table class="table_1" width="100%" cellpadding="6" cellspacing="0">
          <tr class="row1">
            <td>数据0</td>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row2">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
          <tr class="row1">
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
            <td>*****</td>
          </tr>
        </table>
      </div>
    </div> -->
    <!--智慧云盒 -->
    <div id="zhyh">
      <div class="horn1">
        <img src="./modules/images/icons/1-9.png" alt="" />
      </div>
      <div class="horn2">
        <img src="./modules/images/icons/1-10.png" alt="" />
      </div>
      <div class="horn3">
        <img src="./modules/images/icons/1-11.png" alt="" />
      </div>
      <div class="horn4">
        <img src="./modules/images/icons/1-12.png" alt="" />
      </div>
      <div class="title">
        <span>智慧云盒</span>
      </div>
      <div style="width: 380px; margin: 57px auto 0; background-color: #051958">
        <table class="table_2" width="100%" cellpadding="6" cellspacing="0">
          <tr>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-13.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-13.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-13.png" alt="" />
            </td>
            <td>
              <img src="./modules/images/icons/1-14.png" alt="" />
            </td>
          </tr>
        </table>
      </div>
      <div class="total">
        <div>
          <span>连接数：</span>
          <span class="num">1</span>
        </div>
        <div>
          <span>总流量：</span>
          <span class="num">39.1G</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { styleJson2 } from './modules/js/mapStyle.js'
import { dlData } from './modules/js/data.js'
import markerIcon from './modules/images/ludeng1.png'
import markerIcon2 from './modules/images/ludeng2.png'
import turnOnIcon from './modules/images/turn-on.png'
import turnOffIcon from './modules/images/turn-off.png'
import lightOn from './modules/images/light-on.png'
import lightOff from './modules/images/light-off.png'
import { resolve } from 'tinymce'
export default {
  data() {
    return {
      y_gauge1: {},
      y_gauge2: {},
      y_gauge3: {},
      cd_num: {},
      cd_money: {},
      map: {},
      plan_chart: {},
      plan_option: {},
      turnOn: false,
      timer: null,
      city: '',
      temperature: '',
      weather: '',
      // adcode:'', // 城市编码
      adcode: '410300', // 城市编码
      ip: '', // 用户ip地址
    }
  },
  computed: {
    weatherIcon() {
      switch (this.weather) {
        case '晴':
          return require('./modules/images/weather/Sunny.png')
        case '暴雪':
          return require('./modules/images/weather/Blizzard.png')
        case '暴雨':
          return require('./modules/images/weather/rainstorm.png')
        case '暴雨-大暴雨':
          return require('./modules/images/weather/rainstorm1.png')
        case '大暴雨':
          return require('./modules/images/weather/rainstorm2.png')
        case '大雪':
          return require('./modules/images/weather/Blizzard2.png')
        case '大雪-暴雪':
          return require('./modules/images/weather/Blizzard3.png')
        case '大雨':
          return require('./modules/images/weather/heavyRain.png')
        case '大雨-暴雨':
          return require('./modules/images/weather/rainstorm3.png')
        case '冻雨':
          return require('./modules/images/weather/FreezingRain.png')
        case '多云':
          return require('./modules/images/weather/cloudy.png')
        case '浮尘':
          return require('./modules/images/weather/FloatingDust.png')
        case '雷阵雨':
          return require('./modules/images/weather/thunderShower.png')
        case '雷阵雨并伴有冰雹':
          return require('./modules/images/weather/thunderShower1.png')
        case '霾':
          return require('./modules/images/weather/Haze.png')
        case '强沙尘暴':
          return require('./modules/images/weather/StrongSandstorm.png')
        case '沙尘暴':
          return require('./modules/images/weather/sandStorm.png')
        case '特大暴雨':
          return require('./modules/images/weather/HeavyRainstorm.png')
        case '雾':
          return require('./modules/images/weather/fog.png')
        case '小雪':
          return require('./modules/images/weather/MinorSnow.png')
        case '小雪-中雪':
          return require('./modules/images/weather/MinorSnow1.png')
        case '小雨':
          return require('./modules/images/weather/lightRain.png')
        case '小雨-中雨':
          return require('./modules/images/weather/lightRain1.png')
        case '扬沙':
          return require('./modules/images/weather/SandBlowing.png')
        case '阴':
          return require('./modules/images/weather/Yin.png')
        case '雨夹雪':
          return require('./modules/images/weather/sleet.png')
        case '阵雪':
          return require('./modules/images/weather/snowShower.png')
        case '阵雨':
          return require('./modules/images/weather/shower.png')
        case '中雪':
          return require('./modules/images/weather/moderateSnow.png')
        case '中雪-大雪':
          return require('./modules/images/weather/moderateSnow1.png')
        case '中雨':
          return require('./modules/images/weather/moderateRain.png')
        case '中雨-大雨':
          return require('./modules/images/weather/moderateRain1.png')
      }
    },
  },
  mounted() {
    this.getWeatherInfo()
    let that = this
    window.doSwitch = that.doSwitch
    window.switchTurn = that.switchTurn
    window.netStatus = that.netStatus
    window.lightStatus = that.lightStatus
    window.lampStatus = that.lampStatus
    this.map = new BMapGL.Map('mapDiv') // 创建地图实例
    var point = new BMapGL.Point(112.51078, 34.70431) // 创建点坐标
    this.map.setMapStyleV2({ styleJson: styleJson2 })
    this.map.centerAndZoom(point, 15)
    this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    this.map.setHeading(64.5) //设置地图旋转角度
    this.loadBjygb()
    this.loadSbzl()
    this.resresh()
    this.timer = setInterval(() => {
      this.loadLampData()
    }, 15000)
    this.loadHx()
    this.loadGdsydData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    lightStatus(status) {
      if (status == '0') {
        return lightOff
      } else {
        return lightOn
      }
    },
    lampStatus(status) {
      if (status == '0') {
        return markerIcon2
      } else {
        return markerIcon
      }
    },
    switchTurn(status) {
      if (status == '0') {
        return '开灯'
      } else {
        return '关灯'
      }
    },
    netStatus(status) {
      if (status == '1') {
        return '在线'
      } else {
        return '离线'
      }
    },
    loadGdsydData() {
      //供电所用电
      var plan_data1 = []
      var plan_data2 = []
      var plan_xAxis = []
      for (var i = 0; i < dlData.length; i++) {
        var item = dlData[i]
        plan_xAxis.push(item.date)
        plan_data2.push(item.yfxt)
      }
      this.plan_chart = echarts.init(document.getElementById('ggwfChart'))
      this.plan_option = {
        xAxis: {
          data: plan_xAxis,
          axisLabel: {
            textStyle: {
              color: '#B7E1FF',
              fontSize: 15,
            },
          },
          axisLine: {
            lineStyle: {
              color: '#09F',
            },
          },
          axisTick: {
            lineStyle: {
              color: '#09F',
            },
          },
        },
        yAxis: {
          min: 3.5,
          max: 4.5,
          inverse: false,
          splitArea: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              color: '#B7E1FF',
              fontSize: 15,
              fontFamily: 'Arial',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#09F',
            },
          },
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          },
        },
        legend: {
          show: false,
          top: 'bottom',
          textStyle: {
            color: '#F00',
            fontSize: 10,
          },
          data: ['数据'],
        },
        series: [
          {
            name: '数据',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            showAllSymbol: true,
            color: '#50fcfc',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1.7,
                },
              },
            },
            data: plan_data2,
          },
        ],
      }
      this.plan_chart.setOption(this.plan_option)
    },
    loadHx() {
      //环形进度条设置对象
      var option_Progress = {
        title: {
          text: '目前进度',
          subtext: '50%',
          x: 'center',
          y: 55,
          itemGap: 10,
          textStyle: {
            color: '#0bddfc',
            fontWeight: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 16,
          },
          subtextStyle: {
            color: '#0bddfc',
            fontWeight: 'bolder',
            fontSize: 14,
            fontFamily: '微软雅黑',
          },
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: [35, 50],
            x: '0%',
            tooltip: { show: false },
            data: [
              {
                name: '达成率',
                value: 79,
                itemStyle: { color: 'rgba(0,153,255,0.8)' },
                hoverAnimation: false,
                label: {
                  show: false,
                  position: 'center',
                  textStyle: {
                    fontFamily: '微软雅黑',
                    fontWeight: 'bolder',
                    color: '#B7E1FF',
                    fontSize: 24,
                  },
                },
                labelLine: {
                  show: false,
                },
              },
              {
                name: '79%',
                value: 21,
                itemStyle: { color: 'rgba(0,153,255,0.1)' },
                hoverAnimation: false,
                label: {
                  show: false,
                  position: 'center',
                  padding: 20,
                  textStyle: {
                    fontFamily: '微软雅黑',
                    fontSize: 24,
                    color: '#B7E1FF',
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: [55, 60],
            x: '0%',
            hoverAnimation: false,
            data: [
              {
                value: 100,
                itemStyle: { color: 'rgba(0,153,255,0.3)' },
                label: { show: false },
                labelLine: { show: false },
              },
            ],
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: [19, 20],
            x: '0%',
            hoverAnimation: false,
            data: [
              {
                value: 100,
                itemStyle: { color: 'rgba(0,153,255,0.3)' },
                label: { show: false },
                labelLine: { show: false },
              },
            ],
          },
        ],
      }

      var option_water = {
        series: [
          {
            type: 'liquidFill',
            data: [0.8],
            label: {
              fontSize: 19,
              color: '#fff',
            },
            color: ['#5BC5F6'],
            backgroundStyle: {
              color: '#153067',
            },
            outline: {},
          },
        ],
      }
      var option_water2 = {
        series: [
          {
            type: 'liquidFill',
            data: [0.4],
            label: {
              fontSize: 19,
              color: '#fff',
              formatter: '100元',
            },
            color: ['#DF983D'],
            backgroundStyle: {
              color: '#153067',
            },
            outline: {},
          },
        ],
      }

      this.y_gauge1 = echarts.init(document.getElementById('y_gauge1'))
      this.y_gauge2 = echarts.init(document.getElementById('y_gauge2'))
      this.y_gauge3 = echarts.init(document.getElementById('y_gauge3'))
      // this.cd_num = echarts.init(document.getElementById('cd_num'))
      // this.cd_money = echarts.init(document.getElementById('cd_money'))
      var maxg = 100
      var n1 = Math.round(Math.random() * 100).toFixed(2)
      var n2 = Math.round(Math.random() * 100).toFixed(2)
      var n3 = Math.round(Math.random() * 100).toFixed(2)
      //年进度条
      option_Progress.title.subtext = '亮灯率'
      option_Progress.series[0].data[0].value = n1
      option_Progress.title.text = 100 + '%'
      option_Progress.series[0].data[1].value = maxg - n1
      this.y_gauge1.setOption(option_Progress)
      option_Progress.title.subtext = '节能率'
      option_Progress.series[0].data[0].value = n2
      option_Progress.title.text = 65 + '%'
      option_Progress.series[0].data[1].value = maxg - n2
      this.y_gauge2.setOption(option_Progress)
      option_Progress.title.subtext = '在线率'
      option_Progress.series[0].data[0].value = n3
      option_Progress.title.text = 78 + '%'
      option_Progress.series[0].data[1].value = maxg - n3
      this.y_gauge3.setOption(option_Progress)
      // this.cd_num.setOption(option_water)
      // this.cd_money.setOption(option_water2)
    },
    loadLampData() {
      var base_url = window._CONFIG['domianURL']
      let that = this
      $.ajax({
        type: 'POST',
        async: false, // async, avoid js invoke pagelist before jobId data init
        url: base_url + '/corp/lamp/allList',
        data: {},
        dataType: 'json',
        success: function (data) {
          if (data.code == 200) {
            let lampData = data.result
            if (lampData.length > 0) {
              var point = new BMapGL.Point(lampData[0].gwlongitude, lampData[0].gwlatitude)
              that.map.centerAndZoom(point, 15)
            }
            that.map.clearOverlays() //删除所有点
            for (var i = 0; i < data.result.length; i++) {
              let lamp = lampData[i]
              let marker = 'marker' + i //动态生成变量名
              let point = 'point' + i //动态生成变量名
              let opts = 'opts' + i //动态生成变量名
              let infoWindow = 'infoWindow' + i //动态生成变量名
              var myIcon = new BMapGL.Icon(lampStatus(lamp.onStatus), new BMapGL.Size(23, 25))
              // 创建点标记
              window[point] = new BMapGL.Point(lamp.gwlongitude, lamp.gwlatitude) //给变量赋值
              // 在地图上添加点标记
              // window[marker] = new BMapGL.Marker(window[point]); //给变量赋值
              window[marker] = new BMapGL.Marker(window[point], {
                icon: myIcon,
              }) //给变量赋值
              that.map.addOverlay(window[marker]) //使用变量
              // 创建信息窗口
              window[opts] = {
                width: 370,
                height: 120,
                left: 0,
                title: `<div style="display:flex;padding-right:50px;align-items:center;height:50px;">
                      <div style="font-size:16px;">${lamp.name}</div>
                      <div style="margin-left:-49px;margin-top:-4px;">
                      <div style="margin-left:59px;">
                        <img style="width:24px;height:24px;" src="${lightStatus(lamp.onStatus)}"/>
                      </div>
                      </div>
                    </div>`,
                panel: 'panel', //检索结果面板
                enableAutoPan: true, //自动平移
                searchTypes: [],
              }
              var btnText = '未知'
              var statusText = ''
              if (lamp.onStatus == '0') {
                btnText = '开'
                statusText = '已关闭'
              }
              if (lamp.onStatus == '1') {
                btnText = '关'
                statusText = '已开启'
              }
              var content = `
                    <div style="width:70%;margin-top:10px;height:1px;background:#0000000f;margin-left:-1px;"></div>
                    <table style="width:100%;height:80px;margin-top:10px;">
                      <tr>
                        <td style="text-align:left;width:50%;"><span>网络状态：</span><span>${netStatus(
                          lamp.olStatus
                        )}</span></td>
                        <td style="text-align:center;width:50%;"><span>灯控亮度：</span><span>${lamp.bri}%</span></td>
                      </tr>
                      <tr>
                        <td style="text-align:left;width:50%;"><span>路灯电压：</span><span>${lamp.volt} V</span></td>
                        <td style="text-align:center;width:50%;"><span>路灯电流：</span><span>${lamp.curr} A</span></td>
                      </tr>
                      <tr>
                        <td style="text-align:left;width:50%;"><span>路灯功率：</span><span>${lamp.actp} W</span></td>
                        <td style="width:50%;position:relative;">
                          <div style="border:1px solid #ccc;cursor:pointer;width:80px;border-radius:6px;text-align:center;position:absolute;right:53px;top:3px;height:30px;line-height:30px;display:flex;align-item:center;justify-content:center;background:#0767b3;" onclick=doSwitch("${
                            lamp.id
                          }","${lamp.onStatus}")>
                            <span style="vertical-align:middle;color:#fff;">${switchTurn(lamp.onStatus)}</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                    `

              window[infoWindow] = new BMapGL.InfoWindow(content, window[opts]) //使用变量
              // 点标记添加点击事件
              window[marker].addEventListener('click', function () {
                that.map.openInfoWindow(window[infoWindow], window[point]) // 开启信息窗口
              })
            }
          } else {
          }
        },
      })
    },
    doSwitch(id, onStatus) {
      let that = this
      if (confirm('确认要' + (onStatus == '0' ? '开启' : '关闭') + '?')) {
        var base_url = window._CONFIG['domianURL']
        var token = JSON.parse(localStorage.getItem('pro__Access-Token')).value
        $.ajax({
          type: 'GET',
          async: false, // async, avoid js invoke pagelist before jobId data init
          url: base_url + '/corp/lamp/control?id=' + id + '&on=' + (onStatus == '0' ? '1' : '0'),
          data: {},
          beforeSend: function (request) {
            request.setRequestHeader('X-Access-Token', token)
          },
          dataType: 'json',
          success: function (data) {
            if (data.code == 200) {
              alert('操作成功！')
            } else {
              alert(data.message)
            }
            setTimeout(() => {
              that.loadLampData()
            }, 2000)
          },
        })
      }
    },
    getWeatherInfo() {
      let that = this
      $.ajax({
        type: 'GET',
        async: false, // async, avoid js invoke pagelist before jobId data init
        url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=f2af4af07aec0c7ba99fd57e112d0903&city=' + that.adcode,
        data: {},
        dataType: 'json',
        success: function (data) {
          if (data.status == 1) {
            that.city = data.lives[0].city
            that.weather = data.lives[0].weather
            that.temperature = data.lives[0].temperature
          } else {
          }
        },
      })
    },
    getCityCode() {
      let that = this
      new Promise((resolve, reject) => {
        let that = this
        let _script = document.createElement('script')
        _script.setAttribute('charset', 'utf-8')
        _script.setAttribute('type', 'text/javascript')
        _script.setAttribute('src', 'https://pv.sohu.com/cityjson?ie=utf-8')
        document.getElementsByTagName('head')[0].appendChild(_script)
        _script.onload = function () {
          const res = { ip: returnCitySN['cip'] }
          resolve(res)
        }
      }).then((res) => {
        that.ip = res.ip
        $.ajax({
          type: 'GET',
          async: false, // async, avoid js invoke pagelist before jobId data init
          url: 'https://restapi.amap.com/v3/ip?key=f2af4af07aec0c7ba99fd57e112d0903&ip=' + that.ip,
          data: {},
          dataType: 'json',
          success: function (data) {
            console.log(data)
            if (data.status == 1) {
              if (data.adcode.length > 0) {
                that.adcode = data.adcode
              } else {
              }
              that.getWeatherInfo()
            } else {
              that.getWeatherInfo()
            }
          },
        })
      })
    },
    // 设备总览
    loadSbzl() {
      var base_url = window._CONFIG['domianURL']
      $.ajax({
        type: 'POST',
        async: false, // async, avoid js invoke pagelist before jobId data init
        url: base_url + '/corp/lamp/deviceOverview',
        data: {},
        dataType: 'json',
        success: function (data) {
          if (data.code == 200) {
            // document.getElementById('sbzl-zm').innerText = data.result.zm
            for (let key in data.result) {
              // document.getElementById('sbzl-' + key).innerText = data.result[key]
            }
          } else {
          }
        },
      })
    },
    // 报警与广播
    loadBjygb() {
      var data = ['广播：告别PC增长依赖，联想集团Q1迎来第二增长曲线', '111111111111111', '333333333']
      var ul = document.querySelector('.marquee_list')
      var index = 0
      // for (var str of data) {
      //   var li = document.createElement('li')
      //   li.innerText = str
      //   ul.appendChild(li)
      // }
      this.simpleScroll({
        wrapNode: '#J-scroll',
        line: 1,
        duration: 1500,
        speed: 500,
      })
    },
    // 公告循环滚动
    simpleScroll(opts) {
      var opts = $.extend(
        {
          wrapNode: '', //父节点
          listNode: 'ul', //列表节点
          itemNode: 'li', //单个节点
          speed: 500, //滚动速度
          duration: 2000, //间隔时间(毫秒)
          line: 1, //滚动行数
        },
        opts
      )

      var $list = $(opts.wrapNode).find(opts.listNode),
        lineH = $list.find(opts.itemNode + ':first').height(),
        upHeight = 0 - opts.line * lineH

      var scrollUp = function () {
        $list.animate(
          {
            marginTop: upHeight,
          },
          opts.speed,
          function () {
            for (var i = 0; i < opts.line; i++) {
              $list.find(opts.itemNode + ':first').appendTo($list)
            }
            $list.css({ marginTop: 0 })
          }
        )
      }
      window.setInterval(scrollUp, opts.duration)
    },
    //前面补0
    insertZero(n) {
      var no = '000000' + n.toString()
      return no.substring(no.length - 2)
    },
    resresh() {
      var myDate = new Date()

      // $('#refresh').html("<img src=\"images/wait.gif\" align=\"absmiddle\"><span>数据刷新中...</span>");
      $('#currentDate').html(
        myDate.getFullYear() + '/' + this.insertZero(myDate.getMonth() + 1) + '/' + this.insertZero(myDate.getDate())
      )
      $('#timeYear').html(myDate.getFullYear())
      $('#timeMonth').html(this.insertZero(myDate.getMonth() + 1))
      $('#timeDay').html(this.insertZero(myDate.getDate()))
      var week
      switch (myDate.getDay()) {
        case 1:
          week = '一'
          break
        case 2:
          week = '二'
          break
        case 3:
          week = '三'
          break
        case 4:
          week = '四'
          break
        case 5:
          week = '五'
          break
        case 6:
          week = '六'
          break
        case 0:
          week = '日'
          break
        default:
          break
      }
      $('#timeWeekday').html(week)
    },
  },
}
</script>


<style>
/* @import url("./modules/css/easyui.css"); */
@import url('./modules/css/room.css');
.BMap_bubble_title {
  overflow: visible !important;
}
.p1{
  background: transparent;
    color: grey;
    font-size: 18px;
    text-align: center;
    position: relative;
    top: 100px;
}
</style>